<template>
  <div>
    <!-- <div @click="open">
			test
			<slot></slot>
		</div> -->

    <u-popup mode="center" bgColor="transparent" ref="popup">
      <view class="popupwin" :style="{ width: width }">
        <div class="popupwintitle">
          {{ title }}
        </div>
        <slot name="body"></slot>
        <div class="popupwinbottom" :style="{ 'margin-top': top }">
          <div class="cancel" @click="close" v-if="isShowCancel">取消</div>
          <div class="confirm" @click="getconfirm">确定</div>
        </div>
      </view>
    </u-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  props: {
    top: {
      type: String,
      default() {
        return "";
      },
    },
    isShowCancel: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default() {
        return "";
      },
    },
    title: {
      type: String,
      default() {
        return "";
      },
    },
  },
  methods: {
    open() {
      console.log("open");
      this.$refs.popup.open("top");
    },
    getshow() {
      this.show = true;
    },
    close() {
      this.$refs.popup.close();
      this.$emit("close");
    },
    getconfirm(e) {
      this.show = false;
      this.$emit("getdata");
    },
  },
};
</script>

<style scoped lang="scss">
.popupwin {
  width: 518rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;

  .popupwintitle {
    font-size: 34rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
  }

  .popupwinbottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    margin-top: 56rpx;

    .cancel {
      width: 200rpx;
      height: 80rpx;
      background: #ffffff;
      border-radius: 20rpx;
      opacity: 1;
      border: 1rpx solid #7d7d7d;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      font-size: 34rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      margin-right: 16rpx;
    }

    .confirm {
      width: 200rpx;
      height: 80rpx;
      background: #0095ff;
      border-radius: 20rpx;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      font-size: 34rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-left: 16rpx;
    }
  }
}
</style>
